<template>
  <div id="app">
    <div class="nav-all">
      <div class="nav">
        <div class="left">
          <img src="@/logo.jpg">
          <a href="javascript:void(0)"
             v-for="(item,index) in nav"
             :key="index">
            {{item}}
          </a>
        </div>
        <div class="right">
          <a href="javascript:void(0)"
          class="fa fa-moon-o rightF rightY">
          </a>
          <a href="javascript:void(0)"
          class="fa fa-search rightF">
          </a>
          <a href="javascript:void(0)"
          class="fa fa-check-square rightF">
          </a>
            <a href="javascript:void(0)" class="rightB">
              注册
            </a>
            <a href="javascript:void(0)" class="rightBB">
              登录
            </a>
        </div>
      </div>
    </div>
    <main>
      <div class="main-all">
        <div class="main-left">
          <div class="main-Toggle">
            <a v-for="(item,index) in myToggle"
               @click="myOnToggle"
               :key="index"
               href="javascript:void(0)">
              {{item}}
            </a>
          </div>
          <div v-for="(item,index) in GetToggle"
          :key="index"
          class="main-content">
            <div class="main-title">
              <i>妹子</i>妹纸图{{item.title}}
            </div>
            <div class="main-name">
              <i class="fa fa-gratipay"></i>
              {{item.author}} -- 妹纸
            </div>
            <div>
              <img :src="item.url">
            </div>
            <div class="main-desc">
              {{item.desc}}
            </div>

          </div>
        </div>
        <div class="main-right">
          <div class="right-girl">
            <i class="fa fa-refresh"
               @click="myRandomGirl"></i>
            <img :src="randomGirl">
          </div>
        </div>


      </div>


    </main>

    <div class="containerC">
      <div class="myBack">
        <div class="QQ">
          <a href="javascript:void(0)">
            <h6>
              主页
            </h6>
          </a>
          <a href="javascript:void(0)">
            Copyright © 2015-2020 干货集中营 gank.io 沪ICP备13038357号-9
          </a>
          <hr>
          <a href="javascript:void(0)">
            合作伙伴： gank
          </a>
          <div class="QQ1">
            <a href="javascript:void(0)">
          <span class="fa fa-qq">
          </span>
            </a>
            <a href="javascript:void(0)">
          <span class="fa fa-weixin">
          </span>
            </a>
            <a href="javascript:void(0)">
          <span class="fa fa-weibo">
          </span>
            </a>
            <a href="javascript:void(0)">
          <span class="fa fa-envelope">
          </span>
            </a>

          </div>
        </div>
      </div>
    </div>








  </div>
</template>

<script>
import 'font-awesome/css/font-awesome.min.css'

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.axios = axios

export default {
  name: 'App',
  data() {
    return {
      nav: ['首页',
            '妹纸',
            '干货',
            '专题',
            'Flutter',
            'API',
            '留言',
            '❤新版进度❤',
      ],
      myToggle: ['最新',
                 '妹纸',
                 '推荐',
                 'Android',
                 'Flutter',
                 'iOS',
                 '前端',
                 '后端',
                 'App',
      ],
      pagination: 1,
      sheet: 20,
      GetToggle: [],
      randomGirl: []
    }
  },
  created() {
    this.topNav()
    this.myRandomGirl()
  },
  methods: {
    myOnToggle() {
      this.topNav()
    },
    myRandomGirl() {
      axios({
        method: 'GET',
        url: `https://gank.io/api/v2/random/category/Girl/type/Girl/count/1`
      }).then(res => {
        console.log(res.data.data[0].url)
        this.randomGirl = res.data.data[0].url
      })
    },

    topNav() {
      axios({
        method: 'GET',
        url: `https://gank.io/api/v2/data/category/Girl/type/Girl/page/${this.pagination}/count/${this.sheet}`
      }).then(res => {
        const {data} = res.data
        this.GetToggle = [...this.GetToggle, ...data]

        console.log(this.GetToggle)
      })
    }
}}



</script>

<style>
@import "reset.css";
@import "index.css";

</style>
